<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>聊天室</title>
<style>
#message {
	margin-top: 20px;
	border: 1px solid gray;
	padding: 20px;
}
</style>

</head>
<body>

	昵称：
	<input type="text" id="nickname" />
	<button onclick="conectWebSocket()">连接WebSocket</button>
	<button onclick="closeWebSocket()">断开连接</button>

	<br /> 消息：
	<input id="text" type="text" /> 频道号
	<input id="toUser" type="text" />
	<button onclick="send()">发送消息</button>

	<!-- 存放接收到的消息. -->
	<div id="message"></div>


	<script type="text/javascript">
		//连接对象.
		var websocket = null;
		var nickname = null;
		function conectWebSocket() {
			nickname = document.getElementById("nickname").value;
			if (nickname == '') {
				alert("请输入昵称");
				return;
			}
			//判断当前的浏览器是否支持websocket.
			if ("WebSocket" in window) {
				websocket = new WebSocket("ws://localhost:8080/websocket/"
						+ nickname);
			} else {
				alert("Not support websocket");
				return false;
			}

			//连接成功的方法.
			websocket.onopen = function(event) {
				setMessgeHtml("Loc MSG:连接成功");
			}

			//连接关闭.
			websocket.onclose = function(event) {
				setMessgeHtml("Loc MSG:连接关闭");
			}

			//连接异常.
			websocket.onerror = function(event) {
				setMessgeHtml("Loc MSG:连接异常");
			}

			websocket.onmessage = function(event) {
				setMessgeHtml(event.data);
			}

		}

		function setMessgeHtml(msg) {
			var message = document.getElementById("message");
			message.innerHTML += msg + "<br/>";
		}

		/**
			发送消息.
		 */
		function send() {
			var message = document.getElementById("text").value;
			var toUser = document.getElementById("toUser").value;
			var socketMsg = {
				msg : message,
				toUser : toUser
			};
			if (toUser == '') {
				socketMsg.type = 0;//群聊.
			} else {
				socketMsg.type = 1;//单聊.
			}

			//websocket.send(nickname+":"+message);
			websocket.send(JSON.stringify(socketMsg));//将json对象转换为json字符串.
		}
	</script>



</body>
</html>